<template>
  <view class="wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
      <u-form-item label-width="150" label-position="left" label="社团名" prop="name">
        <u-input :border="false" placeholder="请输入社团名" v-model="model.name" type="text"></u-input>
      </u-form-item>
      <u-form-item label-position="left" label="社团编号" prop="number" label-width="150">
        <u-input :border="false" placeholder="请输入社团编号" v-model="model.number" type="text"></u-input>
      </u-form-item>
      <u-form-item label-position="left" label="社团简介" prop="intro" label-width="150">
        <u-input :border="false" placeholder="请输入社团简介" v-model="model.intro" type="textarea" :auto-height="true">
        </u-input>
      </u-form-item>
      <!-- <u-form-item   label-width="150" label-position="left" label="宣传视频" prop="qq">
				<u-input :border="false" placeholder="请上传宣传视频" v-model="model.qq" type="text"></u-input>
			</u-form-item> -->
      <u-form-item label-width="150" label-position="left" label="活动图片" prop="imgs" class="soc">
        <u-upload max-count="4" :auto-upload="false" width="160" height="160" ref="active"></u-upload>
      </u-form-item>
      <u-form-item label-width="150" label-position="left" label="社团封面" prop="index_img" class="soc">
        <u-upload max-count="1" :auto-upload="false" width="160" height="160" ref="index"></u-upload>
      </u-form-item>
    </u-form>
    <!-- 		<view class="agreement">
			<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
			<view class="agreement-text">
				勾选代表同意uView的版权协议
			</view>
		</view> -->
    <u-button @click="saveModel" class="btn" type="warning">保存草稿</u-button>
    <u-button @click="submit" class="btn" type="warning">提交导出</u-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        oid: '',
        title: '',
        rooms: [
          '组织部',
          '生活部'
        ],
        model: {
          name: '',
          intro: '', //社团简介
          // video:'',//社团视频
          number: '', //社团编号
          imgs: '', //活动图片
          index_img: [] //社团封面
        },
        rules: {
          name: [{
            required: true,
            message: '请输入社团名',
            trigger: ['change', 'blur'],
          }],
          number: [{
              required: true,
              message: '请填写编号',
              trigger: ['change', 'blur']
            },
            {
              min: 2,
              message: '编号不能少于？位',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                return this.$u.test.enOrNum(value);
              },
              message: '编号为数字',
              trigger: 'change',
            },
          ],
          intro: [{
              required: true,
              message: '请填写简介',
              trigger: ['change', 'blur']
            },
            {
              min: 5,
              message: '简介不能少于5个字',
              trigger: 'blur',
            },
            // 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
            {
              pattern: /^[\u4e00-\u9fa5]+$/gi,
              message: '简介只能为中文',
              trigger: 'change',
            },
          ],
          // imgs: [
          //   {
          //   	required: false,
          //   },
          // ],
          // index_img: [
          //   {
          //   	required: false,
          //   	message: '请选择图片',
          //     trigger: ['change','blur']
          //   },
          // ]
        },
        // check: false,
        errorType: ['message'],
      };
    },
    onLoad(option) {
      uni.setNavigationBarTitle({
        title: option.title
      })
      this.oid = option.id
      this.title = option.title
      this.model.org = option.title
      console.log(this.oid, this.title)
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
      uni.getStorage({
        key: 'model',
        success: (res) => {
          this.model = res.data
        }
      })
    },
    computed: {
      getToken() {
        return uni.getStorageSync('org_token')
      }
    },
    methods: {
      // 缓存模板
      saveModel() {
        uni.setStorage({
          key: 'model',
          data: this.model,
          success: () => {
            uni.showToast({
              mask: true,
              title: '保存成功',
              // 隐藏toast
              success: () => {
                setTimeout(() => {
                  uni.hideToast()
                }, 700);
              }
            })
          }
        })
      },
      // 提交函数
      submit() {
        let that = this
        console.log(this.model)
        let model = this.model
        let index = [];
        index = this.$refs.index.lists;
        let imgs = [];
        imgs = this.$refs.active.lists;
        // 表单验证
        this.$refs.uForm.validate(valid => {
          if (valid) {
            that.$upfile({
              url: '/sendstinf',
              name: 'index_img',
              filePath: index[0].file.path,
              data: {
                name: model.name,
                intro: model.intro,
                number: model.number,
              },
              header: {
                'Authorization': "Bearer" + that.getToken
              }, // 可不填，虽然多半不可能
            }).then(res => {
              // 成功后执行，具体格式待对完接口完善
              console.log(res)
            }).catch(res => {
              // 失败后执行
            })
            // 活动图片循环上传
            imgs.forEach(item => {
              that.$upfile({
                url: '/sendstinf',
                filePath: item.file.path,
                name: 'imgs',
                header: {
                  'Authorization': "Bearer" + that.getToken
                },
              }).then(res => {
                console.log(res)
              }).catch(res => {
                console.log(res)
              })
            })
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },
      // 勾选版权协议
      // checkboxChange(e) {
      // 	that.model.agreement = e.value;
      // },
    }
  };
</script>

<style scoped lang="scss">
  .wrap {
    padding: 30rpx;
  }

  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;

  }

  .agreement-text {
    padding-left: 8rpx;
    // color: $u-tips-color;
  }

  .soc {}

  .btn,
  button {
    margin: 15rpx;
  }
</style>
